import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { DatePipe } from '@angular/common';
import { differenceInCalendarDays } from 'date-fns';

@Component({
  selector: 'app-prescriptions-analysis',
  templateUrl: './prescriptions-analysis.component.html',
  styleUrls: ['./prescriptions-analysis.component.scss']
})
export class PrescriptionsAnalysisComponent implements OnInit {
  today = new Date();
  currentMonth = `${new Date().getFullYear()}-${new Date().getMonth() + 1}-1`;
  searchParams = {
    start_date: this.datePipe.transform(this.currentMonth, 'yyyy-MM-dd HH:mm:ss'),
    end_date: this.datePipe.transform(this.today, 'yyyy-MM-dd HH:mm:ss'),
    doctor: '全部',
    department: '全部',
    type: '全部',
    '病人性质': '全部'
  };
  anySearchRes = {
    start_date: this.datePipe.transform(this.currentMonth, 'yyyy-MM-dd HH:mm:ss'),
    end_date: this.datePipe.transform(this.today, 'yyyy-MM-dd HH:mm:ss'),
    doctor: '全部',
    department: '全部',
    type: '全部',
    '病人性质': '全部'
  };
  resultsObj = null;
  keshiOptions: any = [];
  yishengOptions: any = [];
  yichangChufangOptions: any;
  wentiChufangOptions: any;
  jinjiOptions: any;
  chaobiaoOptions: any;
  chongfuOptions: any;
  weiguiYishengOptions: any;
  jinjiTableData = {};
  chaobiaoTableData = {};
  chongfuTableData = {};
  moreJinjiTableData = true;
  moreChaobiaoTableData = true;
  moreChongfuTableData = true;
  constructor(public http: HttpClient, public datePipe: DatePipe) {
    this.onSubmit();
  }
  disabledDate = (current: Date): boolean => {
    // Can not select days before today and today
    return differenceInCalendarDays(current, this.searchParams['start_date']) < 0 || differenceInCalendarDays(current, this.searchParams['start_date']) === 0;
  }

  /**
   * @description 搜索方法
   */
  onSubmit() {
    this.searchParams.start_date = this.datePipe.transform(this.searchParams['start_date'], 'yyyy-MM-dd HH:mm:ss');
    this.searchParams.end_date = this.datePipe.transform(this.searchParams['end_date'], 'yyyy-MM-dd HH:mm:ss');
    this.anySearchRes = JSON.parse(JSON.stringify(this.searchParams));
    const params = {
      params: this.searchParams
    };
    this.http.get(window.API_ROOT + 'api/statistics/recipe', params).toPromise().then((res: any) => {
      console.log(res);
      this.resultsObj = res.data;

      this.createFeiyong();
      this.createWenti();
      this.createJinji();
      this.jinjiTable();
      this.createChaobiao();
      this.chaobiaoTable();
      this.createChongfu();
      this.chongfuTable();
      this.createWeigui();
    });
  }

  /**
  * @description 获取科室
  */
 getKeshi() {
  const params = {
    params: {
      value: ''
    }
  };
  this.http.get(window.API_ROOT + 'api/recipes/departments', params).toPromise().then((res: any) => {
    console.log(res);
    this.keshiOptions = res.data;
  });
}
/**
* @description 获取医生
*/
getYisheng() {
  const params = {
    params: {
      '科室': this.searchParams['department']
    }
  };
  this.http.get(window.API_ROOT + 'api/recipes/doctors', params).toPromise().then((res: any) => {
    console.log(res);
    this.yishengOptions = res.data;
  });
}


  /**
   * @description 异常处方占比
   */
  createFeiyong() {
    this.yichangChufangOptions = {
      tooltip: {
        trigger: 'item',
        formatter: '{b}: {d}%'
      },
      color: ['#4F81BC', '#C0504E'],
      series: [
        {
          name: '异常处方占比',
          type: 'pie',
          radius: ['80%', '30%'],
          avoidLabelOverlap: false,
          itemStyle: {
            normal: {
              label: {
                show: true,
                position: 'inside',
                formatter: '{b}\n\n {d}%',
                textStyle: { // 数值样式
                  color: '#fff',
                  fontSize: 16
                }
              }
            },
              emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
          },
          labelLine: {
            normal: {
              show: false
            }
          },
          data: this.resultsObj['异常处方占比'].data
        }
      ]
    };
  }

  /**
  * @description 问题处方类型分布
  */
  createWenti() {
    this.wentiChufangOptions = {
      tooltip: {
      },
      grid: {
        left: '3%',
        right: '14%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'value',
        axisTick: {
          show: false
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: '#000',
            fontSize: 16
          }
        },
        'splitLine': {     // 网格线
          'show': false
        },
        boundaryGap: [0, 0.01]
      },
      yAxis: {
        type: 'category',
        axisTick: {
          show: false
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: '#000',
            fontSize: 16
          }
        },
        data: this.resultsObj['问题处方类型分布'].name
        // data: ['配伍禁忌', '药物超标', '药物重复']
      },
      series: [
        {
          barWidth: 50,
          type: 'bar',
          data: this.resultsObj['问题处方类型分布'].data,
          // data: [18203, 23489, 29034],
          itemStyle: {
            normal: {
              color: params => {
                const colorList = ['#C0504E', '#FFC000', '#01B0F1'];
                return colorList[params.dataIndex];
              },
              label: {
                show: true,
                position: 'right',
                textStyle: { // 数值样式
                  color: 'black',
                  fontSize: 16
                }
              }
            }
          }
        }
      ]
    };
  }
  /**
   * @description 配伍禁忌明细 图
   */
  createJinji() {
    this.jinjiOptions = {
      tooltip: {
      },
      color: ['#C0504E', '#FFC000', '#01B0F1'],
      grid: {
        left: '2%',
        right: '16%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01],
        show: false,
        axisTick: {
          show: false
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: '#000',
            fontSize: 16
          }
        },
      },
      yAxis: {
        type: 'category',
        splitLine: { show: false }, // 改设置不显示坐标区域内的y轴分割线
        // data: ['配伍禁忌', '药物超标', '药物重复'],
        axisTick: {
          show: false
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: '#000',
            fontSize: 16
          }
        },
        data: this.resultsObj['配伍禁忌明细-排名'].name
      },
      series: [
        {
          type: 'bar',
          barWidth: 30,
          data: this.resultsObj['配伍禁忌明细-排名'].data,
          // data: [18203, 23489, 29034],
          itemStyle: {
            normal: {
              color: params => {
                const colorList = ['#E6E0EC', '#FAC090', '#012060', '#0071C1', '#92D051', '#FFBF01', '#C00000'];
                return colorList[params.dataIndex];
              },
              label: {
                show: true,
                position: 'right',
                textStyle: { // 数值样式
                  color: 'black',
                  fontSize: 16
                }
              }
            }
          }
        }
      ]
    };
  }

  /**
   * @description 禁忌table
   */
  jinjiTable() {
    this.moreJinjiTableData = !this.moreJinjiTableData;
    if (!this.moreJinjiTableData) {
      this.jinjiTableData = JSON.parse(JSON.stringify(this.resultsObj['配伍禁忌明细']));
      this.jinjiTableData['body'] = JSON.parse(JSON.stringify(this.resultsObj['配伍禁忌明细']['body'].slice(0, 5)));
    } else {
      this.moreChongfuTableData = false; // 收起其他
      this.chongfuTableData['body'] = JSON.parse(JSON.stringify(this.resultsObj['配伍禁忌明细']['body'].slice(0, 5))); // 收起其他
      this.moreChaobiaoTableData = false; // 收起其他
      this.chaobiaoTableData['body'] = JSON.parse(JSON.stringify(this.resultsObj['配伍禁忌明细']['body'].slice(0, 5))); // 收起其他

      this.jinjiTableData = JSON.parse(JSON.stringify(this.resultsObj['配伍禁忌明细']));
      this.jinjiTableData['body'] = JSON.parse(JSON.stringify(this.resultsObj['配伍禁忌明细']['body']));
    }
  }

  /**
   * @description 超标明细 图
   */
  createChaobiao() {
    this.chaobiaoOptions = {
      tooltip: {
      },
      color: ['#C0504E', '#FFC000', '#01B0F1'],
      grid: {
        left: '2%',
        right: '16%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01],
        show: false,
        axisTick: {
          show: false
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: '#000',
            fontSize: 16
          }
        },
      },
      yAxis: {
        type: 'category',
        splitLine: { show: false }, // 改设置不显示坐标区域内的y轴分割线
        // data: ['配伍禁忌', '药物超标', '药物重复'],
        axisTick: {
          show: false
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: '#000',
            fontSize: 16
          }
        },
        data: this.resultsObj['药物超标明细-排名'].name
      },
      series: [
        {
          type: 'bar',
          barWidth: 30,
          data: this.resultsObj['药物超标明细-排名'].data,
          // data: [18203, 23489, 29034],
          itemStyle: {
            normal: {
              color: params => {
                const colorList = ['#E6E0EC', '#FAC090', '#012060', '#0071C1', '#92D051', '#FFBF01', '#C00000'];
                return colorList[params.dataIndex];
              },
              label: {
                show: true,
                position: 'right',
                textStyle: { // 数值样式
                  color: 'black',
                  fontSize: 16
                }
              }
            }
          }
        }
      ]
    };
  }

  /**
   * @description 超标明细table
   */
  chaobiaoTable() {
    this.moreChaobiaoTableData = !this.moreChaobiaoTableData;
    // this.resultsObj['药物超标明细']['body'] = [
    //   ['343434', 'ewew1', '2018-10-21', '屋头|贝母'],
    //   ['343434', 'ewew2', '2018-10-21', '屋头|贝母'],
    //   ['343434', 'ewew3', '2018-10-21', '屋头|贝母'],
    //   ['343434', 'ewew4', '2018-10-21', '屋头|贝母'],
    //   ['343434', 'ewew5', '2018-10-21', '屋头|贝母'],
    //   ['343434', 'ewew6', '2018-10-21', '屋头|贝母'],
    //   ['343434', 'ewew7', '2018-10-21', '屋头|贝母']
    // ];
    if (!this.moreChaobiaoTableData) {
      this.chaobiaoTableData = JSON.parse(JSON.stringify(this.resultsObj['药物超标明细']));
      this.chaobiaoTableData['body'] = JSON.parse(JSON.stringify(this.resultsObj['药物超标明细']['body'].slice(0, 5)));
    } else {
      this.moreJinjiTableData = false; // 收起其他
      this.jinjiTableData['body'] = JSON.parse(JSON.stringify(this.resultsObj['配伍禁忌明细']['body'].slice(0, 5))); // 收起其他
      this.moreChongfuTableData = false; // 收起其他
      this.chongfuTableData['body'] = JSON.parse(JSON.stringify(this.resultsObj['配伍禁忌明细']['body'].slice(0, 5))); // 收起其他


      this.chaobiaoTableData = JSON.parse(JSON.stringify(this.resultsObj['药物超标明细']));
      this.chaobiaoTableData['body'] = JSON.parse(JSON.stringify(this.resultsObj['药物超标明细']['body']));
    }
  }

  /**
   * @description 药物重复明细 图
   */
  createChongfu() {
    this.chongfuOptions = {
      tooltip: {
      },
      color: ['#C0504E', '#FFC000', '#01B0F1'],
      grid: {
        left: '2%',
        right: '16%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01],
        show: false,
        axisTick: {
          show: false
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: '#000',
            fontSize: 16
          }
        },
      },
      yAxis: {
        type: 'category',
        splitLine: { show: false }, // 改设置不显示坐标区域内的y轴分割线
        // data: ['配伍禁忌', '药物超标', '药物重复'],
        axisTick: {
          show: false
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: '#000',
            fontSize: 16
          }
        },
        data: this.resultsObj['药物重复明细-排名'].name
      },
      series: [
        {
          type: 'bar',
          barWidth: 30,
          data: this.resultsObj['药物重复明细-排名'].data,
          // data: [18203, 23489, 29034],
          itemStyle: {
            normal: {
              color: params => {
                const colorList = ['#E6E0EC', '#FAC090', '#012060', '#0071C1', '#92D051', '#FFBF01', '#C00000'];
                return colorList[params.dataIndex];
              },
              label: {
                show: true,
                position: 'right',
                textStyle: { // 数值样式
                  color: 'black',
                  fontSize: 16
                }
              }
            }
          }
        }
      ]
    };
  }

  /**
   * @description 药物重复明细 table
   */
  chongfuTable() {
    this.moreChongfuTableData = !this.moreChongfuTableData;
    // this.resultsObj['药物超标明细']['body'] = [
    //   ['343434', 'ewew1', '2018-10-21', '屋头|贝母'],
    //   ['343434', 'ewew2', '2018-10-21', '屋头|贝母'],
    //   ['343434', 'ewew3', '2018-10-21', '屋头|贝母'],
    //   ['343434', 'ewew4', '2018-10-21', '屋头|贝母'],
    //   ['343434', 'ewew5', '2018-10-21', '屋头|贝母'],
    //   ['343434', 'ewew6', '2018-10-21', '屋头|贝母'],
    //   ['343434', 'ewew7', '2018-10-21', '屋头|贝母']
    // ];

    if (!this.moreChongfuTableData) {
      this.chongfuTableData = JSON.parse(JSON.stringify(this.resultsObj['药物重复明细']));
      this.chongfuTableData['body'] = JSON.parse(JSON.stringify(this.resultsObj['药物重复明细']['body'].slice(0, 5)));
    } else {
      this.moreJinjiTableData = false; // 收起其他
      this.jinjiTableData['body'] = JSON.parse(JSON.stringify(this.resultsObj['配伍禁忌明细']['body'].slice(0, 5))); // 收起其他
      this.moreChaobiaoTableData = false; // 收起其他
      this.chaobiaoTableData['body'] = JSON.parse(JSON.stringify(this.resultsObj['配伍禁忌明细']['body'].slice(0, 5))); // 收起其他

      this.chongfuTableData = JSON.parse(JSON.stringify(this.resultsObj['药物重复明细']));
      this.chongfuTableData['body'] = JSON.parse(JSON.stringify(this.resultsObj['药物重复明细']['body']));
    }
  }

  /**
   * 违规医生
   */
  createWeigui() {
    this.weiguiYishengOptions = {
      color: ['#3398DB'],
      tooltip: {
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          data: this.resultsObj['违规医生排名'].name,
          axisTick: {
            show: false
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#000',
              fontSize: 16
            }
          },
        }
      ],
      yAxis: [
        {
          type: 'value',
          show: false,
          axisTick: {
            show: false
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#000',
              fontSize: 16
            }
          },
        }
      ],
      series: [
        {
          name: '违规医生排名',
          type: 'bar',
          barWidth: '30',
          data: this.resultsObj['违规医生排名'].data,
          itemStyle: {
            normal: {
              color: params => {
                const colorList = ['#FAC090', '#DED9C3', '#C7D9F1', '#FDEADB', '#B8DEE9', '#CDC0DA', '#C3D79C', '#558ED5', '#948B54', '#C00000'];
                return colorList[params.dataIndex];
              },
              label: {
                show: true,
                position: 'top',
                textStyle: { // 数值样式
                  color: 'black',
                  fontSize: 16
                }
              }
            }
          }
        }
      ]
    };
  }

  ngOnInit() {
    this.getKeshi();
    this.getYisheng();
  }

}
